<template>
    <right-layout class="add-user" :visible.sync="show" :title="title" @closeLayout="closeLayout">
        <el-form :model="ruleForm" :rules="rules" ref="form" label-width="100px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="姓名：" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="工号：" prop="employeeNo">
                        <el-input v-model="ruleForm.employeeNo"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="用户组：" prop="deptId">
                        <select-dept v-model="ruleForm.deptId" :label.sync="ruleForm.deptName">
                        </select-dept>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="手机：" prop="mobile">
                        <el-input v-model="ruleForm.mobile"></el-input>
                        <p class="tips">手机可作为客服人员的登录账号,不能重复</p>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="邮箱：" prop="email">
                        <el-input v-model="ruleForm.email"></el-input>
                        <p class="tips">邮箱可作为客服人员的登录账号,不能重复</p>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="隐藏号码：" prop="isSecret">
                        <el-switch v-model="ruleForm.isSecret">
                        </el-switch>
                        <p class="tipmsgp">开启后，无法从通讯录中看到该号码</p>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="是否启用：">
                        <el-switch v-model="ruleForm.isSecret2">
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <div slot="foot">
            <div class="left">
                <el-button @click="closeLayout" type="text">取消</el-button>
            </div>
            <el-button type="success" @click="submitFun" :loading="loading">保存</el-button>
            <el-button type="default" @click="resetForm">重置</el-button>
        </div>
    </right-layout>
</template>

<script>
    import selectDept from '@/components/selectDept';
    import selectRole from '@/components/selectRole';
    import RightLayout from '@/components/layout/RightLayout';
    import {
        mapState
    } from 'vuex';
    import {
        querySingleDeptUser,
        updateDeptUser
    } from "@/service/core/userManage";

    export default {
        name: '',
        components: {
            RightLayout,
            selectDept,
            selectRole,
        },

        data() {
            var validate_descr = (rule, value, callback) => {
                if (this.ruleForm.descr_l > 256) {
                    callback(new Error());
                } else {
                    callback();
                }
            }
            return {
                title: '新增员工',
                show: false,
                ruleForm: {
                    id: '', // 主键
                    username: '',
                    employeeNo: '',
                    mobile: '',
                    email: '',
                    deptId: '',
                    deptName: '',
                    isSecret: false,
                    isSecret2: true,
                },
                loading: false,
                rules: {
                    username: [{
                        required: true,
                        message: '姓名必填',
                        trigger: 'blur'
                    }, {
                        min: 0,
                        max: 10,
                        message: '长度限制10位',
                        trigger: 'blur'
                    }],
                    employeeNo: [{
                        required: true,
                        message: '员工工号必填',
                        trigger: 'blur'
                    }, {
                        min: 0,
                        max: 10,
                        message: '长度限制10位',
                        trigger: 'blur'
                    }],
                    email: [{
                        pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                        message: '邮箱格式错误',
                        trigger: 'blur'
                    }, {
                        min: 0,
                        max: 64,
                        message: '长度限制64位',
                        trigger: 'blur'
                    }],
                    mobile: [{
                            required: true,
                            message: '手机号必填',
                            trigger: 'blur'
                        }, {
                            min: 0,
                            max: 13,
                            message: '长度限制13位数字',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^1[3456789]\d{9}$/,
                            message: '手机号错误',
                            trigger: 'blur'
                        }
                    ],

                },
            }
        },
        computed: {
            ...mapState({
                token: state => state.token.token,
                tenementId: state => state.token.tenementId,
                
            }),

        },
        methods: {
            showLayout(data) {
                this.title = '修改员工';
                this.ruleForm.id = data.id;
                this.queryDetail();
                this.show = true;
            },
            closeLayout() {
                this.show = false;
                setTimeout(() => {
                    this.resetForm();
                }, 500)
            },
            resetForm() {
                this.queryDetail();
            },
            submitFun() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        let params = {
                            id: this.ruleForm.id, // 主键
                            username: this.ruleForm.username,
                            employeeNo: this.ruleForm.employeeNo,
                            deptId: this.ruleForm.deptId,
                            mobile: this.ruleForm.mobile,
                            email: this.ruleForm.email,
                            deptName: this.ruleForm.deptName,
                            isSecret: Number(this.ruleForm.isSecret),
                            
                            userStatusId: this.ruleForm.isSecret2,
                        }
                        if (this.ruleForm.isSecret2) {
                            params.userStatusId = 'ACTIVE'
                        } else {
                            params.userStatusId = 'INACTIVE'
                        }
                        this.loading = true
                        updateDeptUser(params).then(res => {
                            if (res.data.code == 1000) {
                                this.$notify({
                                    title: '提示',
                                    type: 'success',
                                    message: '修改成功！'
                                })
                                this.$emit('refresh');

                                this.closeLayout()
                            }
                            this.loading = false
                        })
                    }
                })
            },
            queryDetail() { // 用户明细
                let params = {
                    id: this.ruleForm.id
                }
                querySingleDeptUser(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (data) {
                            this.ruleForm.id = data.id;
                            this.ruleForm.username = data.username;
                            this.ruleForm.employeeNo = data.employeeNo;
                            this.ruleForm.mobile = data.mobile
                            this.ruleForm.email = data.email
                            this.ruleForm.deptId = data.deptId;
                            this.ruleForm.deptName = data.deptName;
                            this.ruleForm.isSecret = Boolean(data.isSecret);
                            if (data.userStatusId == 'ACTIVE') {
                                this.ruleForm.isSecret2 = true
                            } else if (data.userStatusId == 'INACTIVE') {
                                this.ruleForm.isSecret2 = false
                            }

                        }
                    }
                })
            },

        }
    }

</script>

<style lang="scss" scoped>
    .add-user {
        .btn-wrap {
            text-align: right;
            padding-bottom: 10px;
        }
    }

</style>
